<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inula Request API Test</title>
    <link rel="stylesheet" type="text/css" href="requestStyles.css">
</head>
<body>
<header>Inula Request API Test</header>
<div class="container">
    <div class="card">
        <h2>Request</h2>
        <pre id="request-result">等待发送请求...</pre>
    </div>
</div>
<div class="container">
    <div class="card">
        <h2>GET Request</h2>
        <pre id="get-result">等待发送请求...</pre>
    </div>
    <div class="card">
        <h2>POST Request</h2>
        <pre id="post-result">等待发送请求...</pre>
    </div>
    <div class="card">
        <h2>PUT Request</h2>
        <pre id="put-result">等待发送请求...</pre>
    </div>
    <div class="card">
        <h2>DELETE Request</h2>
        <pre id="delete-result">等待发送请求...</pre>
    </div>
</div>
<div class="container">
    <div class="card">
        <h2>HEAD Request</h2>
        <pre id="head-result">等待发送请求...</pre>
    </div>
    <div class="card">
        <h2>OPTIONS Request</h2>
        <pre id="options-result">等待发送请求...</pre>
    </div>
    <div class="card">
        <h2>PATCH Request</h2>
        <pre id="patch-result">等待发送请求...</pre>
    </div>
</div>
<div class="container">
    <div class="card" style="height: 250px">
        <h2>UPLOAD Request</h2>
        <input type="file" id="fileInput">
        <pre id="upload-progress">UploadProgress: 0%</pre>
        <pre id="upload-result">等待发送请求...</pre>
    </div>
    <div class="card" style="height: 250px">
        <h2>DOWNLOAD Request</h2>
        <div style="height: 23px"></div>
        <pre id="download-progress">DownloadProgress: 0%</pre>
        <pre id="download-result">等待发送请求...</pre>
    </div>
</div>
<div class="button">
    <button id="queryButton">点击发送请求</button>
</div>
<br>
<div class="button">
    <button id="resetButton">点击重置</button>
</div>
<script src="../../dist/bundle.js"></script>
<script>
  const requestResult = document.getElementById('request-result');
  const getResult = document.getElementById('get-result');
  const postResult = document.getElementById('post-result');
  const putResult = document.getElementById('put-result');
  const deleteResult = document.getElementById('delete-result');
  const headResult = document.getElementById('head-result');
  const optionsResult = document.getElementById('options-result');
  const patchResult = document.getElementById('patch-result');
  const fileInput = document.getElementById('fileInput');
  const uploadProgress = document.getElementById('upload-progress');
  const uploadResult = document.getElementById('upload-result');
  const downloadProgress = document.getElementById('download-progress');
  const downloadResult = document.getElementById('download-result');
  const queryButton = document.getElementById('queryButton');
  const resetButton = document.getElementById('resetButton');

  queryButton.addEventListener('click', function () {
    const irInstance = inulaRequest.create();
    irInstance.request('http://localhost:3001/', {method: 'GET', data: {}})
      .then(function (response) {
        requestResult.innerHTML = JSON.stringify(response.data, null, 2);
      })
      .catch(function (error) {
        requestResult.innerHTML = JSON.stringify(error, null, 2);
      })

    inulaRequest.default.get('http://localhost:3001/')
      .then(function (response) {
        getResult.innerHTML = JSON.stringify(response.data, null, 2);
      })
      .catch(function (error) {
        getResult.innerHTML = JSON.stringify(error, null, 2);
      });

    inulaRequest('http://localhost:3001/', {method:'POST', name: 'Alice'})
      .then(function (response) {
        postResult.innerHTML = JSON.stringify(response.data, null, 2);
      })
      .catch(function (error) {
        postResult.innerHTML = JSON.stringify(error, null, 2);
      });

    inulaRequest.put('http://localhost:3001/users', {id: 1, name: 'Bob'})
      .then(function (response) {
        putResult.innerHTML = JSON.stringify(response.data, null, 2);
      })
      .catch(function (error) {
        putResult.innerHTML = JSON.stringify(error, null, 2);
      });

    inulaRequest.delete('http://localhost:3001/users', {params: {id: 1, test:['{}']}})
      .then(function (response) {
        deleteResult.innerHTML = JSON.stringify(response.data, null, 2);
      })
      .catch(function (error) {
        deleteResult.innerHTML = JSON.stringify(error, null, 2);
      });

    inulaRequest.head('http://localhost:3001/')
      .then(function (response) {
        headResult.innerHTML = 'Header: ' + JSON.stringify(response.headers['x-powered-by'], null, 2); // IE 浏览器不支持 HEAD 方式访问响应头
      })
      .catch(function (error) {
        headResult.innerHTML = JSON.stringify(error, null, 2);
      });

    inulaRequest.options('http://localhost:3001/', {
      headers: {
        'Access-Control-Request-Method': 'POST'
      }
    })
      .then(function (response) {
        optionsResult.innerHTML = 'status: ' + JSON.stringify(response.status, null, 2);
      })
      .catch(function (error) {
        optionsResult.innerHTML = JSON.stringify(error, null, 2);
      });

    inulaRequest.patch('http://localhost:3001/', {name: 'IR'})
      .then(function (response) {
        patchResult.innerHTML = JSON.stringify(response.data, null, 2);
      })
      .catch(function (error) {
        patchResult.innerHTML = JSON.stringify(error, null, 2);
      });

    inulaRequest.get('http://localhost:3001/download', {
      responseType: 'text',
      onDownloadProgress: function (progressEvent) {
        const loaded = progressEvent.loaded;
        const total = progressEvent.total;
        const progressPercentage = Math.round((loaded / total) * 100);
        downloadProgress.innerHTML = 'Download progress: ' + progressPercentage + '%';
      },
    }).then(function (response) {
      downloadResult.innerHTML = JSON.stringify(response.data, null, 2);
    }).catch(function (error) {
      downloadResult.innerHTML = JSON.stringify(error, null, 2);
    })
  });

  resetButton.addEventListener('click', function () {
    requestResult.innerHTML = '等待发送请求...';
    getResult.innerHTML = '等待发送请求...';
    postResult.innerHTML = '等待发送请求...';
    putResult.innerHTML = '等待发送请求...';
    deleteResult.innerHTML = '等待发送请求...';
    headResult.innerHTML = '等待发送请求...';
    optionsResult.innerHTML = '等待发送请求...';
    patchResult.innerHTML = '等待发送请求...';
    fileInput.value = '';
    uploadProgress.innerHTML = 'UploadProgress: 0%';
    uploadResult.innerHTML = '等待发送请求...';
    downloadProgress.innerHTML = 'DownloadProgress: 0%';
    downloadResult.innerHTML = '等待发送请求...';
  });

  function uploadFile(file) {
    const formData = new FormData();
    formData.append('file', file);

    inulaRequest.post('http://localhost:3001/', formData, {
      onUploadProgress: function (progressEvent) {
        const loaded = progressEvent.loaded;
        const total = progressEvent.total;
        const progressPercentage = Math.round((loaded / total) * 100);
        uploadProgress.innerHTML = 'Upload progress: ' + progressPercentage + '%';
      },
    })
      .then(function (response) {
        uploadResult.innerHTML = JSON.stringify(response.data, null, 2);
      })
      .catch(function (error) {
        uploadResult.innerHTML = JSON.stringify(error, null, 2);
      });
  }

  fileInput.addEventListener('change', function (event) {
    const file = event.target.files[0];
    uploadFile(file);
  });
</script>
</body>
</html>
